<template>
	<view style="width: 100%;" class="allContent">
		<view class="header">
			<view style="display: flex;">
				<image :src="campData.img" style="width: 200rpx;height: 200rpx;margin: 40rpx 20rpx 20rpx 20rpx;">
				</image>
				<view style="margin: 0rpx 0 0 0rpx;">
					<view style="font-size: 32rpx;font-weight: 600;margin-top: 50rpx;">
						{{campData.name}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						期数：{{campData.qishu}}
					</view>
					<view style="color: #6D6D6D;font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						学习周期：{{campData.date}}
					</view>
					<view style="color: rgb(251, 0, 29);font-size: 24rpx;margin-top: 10rpx;white-space: pre-line;">
						￥{{campData.price}}
					</view>
				</view>
			</view>
			<view class="sticky-box" :style="stickyStyle">
				<utabsswiper activeColor="#ea5550" ref="tabs" :list="list" :current="current" @change="change"
					:fontSize="24" :is-scroll="false" swiperWidth="750"></utabsswiper>
			</view>
			<view v-if="swiperCurrent == 0 && bootId != ''">
				<introduction :introImg="campData.introduction" class="swiper-content" :data-index="swiperCurrent">
				</introduction>
			</view>
			<view v-if="swiperCurrent == 1 && bootId != ''" class="aaa">
				<studyschedule :bootId="bootId" :userId="userId" :token="token" :learn="learn" class="swiper-content"
					:data-index="swiperCurrent">
				</studyschedule>
			</view>
			<view v-if="swiperCurrent == 2 && bootId != ''">
				<Dynamic :bootId="bootId" :userId="userId" :token="token" class="swiper-content"
					:data-index="swiperCurrent">
				</Dynamic>
			</view>
			<view v-if="swiperCurrent == 3 && bootId != ''">
				<myDynamic :bootId="bootId" :userId="userId" :token="token" class="swiper-content"
					:data-index="swiperCurrent">
				</myDynamic>
			</view>
		</view>

		<view class="des_detail" :style="{'margin-top':openAppHeight + 'px'}">
			<open-app></open-app>
		</view>
		<!-- 		<view class="des_detail">
			<open-app></open-app>
		</view> -->
		<button type="primary" class="call" v-show="swiperCurrent == 0">联系老师获取体验资格</button>
	</view>

</template>
<script>
	const app = getApp();
	import utabsswiper from '../portraitMaster/backup/h-tabs-swiper.vue';
	import introduction from './components/introduction.vue';
	import studyschedule from './components/studyschedule.vue';
	import Dynamic from './components/dynamic.vue';
	import myDynamic from './components/myDynamic.vue';
	import openApp from './components/openApp.vue';
	import {
		getCurrentBootcamp,
		getBootcampArrange
	} from '@/api/camp.js';

	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'

	export default {
		components: {
			utabsswiper,
			introduction,
			studyschedule,
			Dynamic,
			myDynamic,
			openApp
		},
		data() {
			return {
				current: 1,
				swiperCurrent: 1,
				list: [{
					name: '简介'
				}, {
					name: '学习安排'
				}, {
					name: '动态'
				}, {
					name: '我的打卡记录'
				}],
				stickyStyle: '',
				detailHeight: 1000,
				campData: {},
				userId: '',
				token: '',
				phone: '',
				bootId: '', //训练营Id
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				marTop: 10,
				openAppHeight: -200,
				learn: 0,
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;
			//that.calcSwiperHeight();
			//计算第一个页面的内容高度
			//that.calcSwiperHeight(that.swiperCurrent);
		},
		onPageScroll(res) {
			let that = this;

			if (res.scrollTop > 200) { // 滚动超过300时吸顶

			}
			that.openAppHeight = res.scrollTop - 200;
			//console.log('----***  ' + that.openAppHeight)
		},
		onLoad() {
			let that = this;

			//let locatiojUrl = window.location.href;

			let locatiojUrl =
				'http://10.10.8.15:8080/qz/?phone=13012562102&token=1202bdc5effd1ecbbd447deec7a6f78b&userId=337538';

			that.userId = decodeURI(that.jqueryUrl(locatiojUrl).userId);
			that.token = decodeURI(that.jqueryUrl(locatiojUrl).token);
			that.phone = decodeURI(that.jqueryUrl(locatiojUrl).phone);
			that.loginH5();
			that.getCamp();
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		methods: {
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			toWx() {
				let that = this;
				let platform = uni.getSystemInfoSync().platform; //手机类型
				// 通过检查window.android和window.webkit属性来判断是否是移动端
				if (window.webkit) {
					if (platform == 'ios') {
						window.webkit.messageHandlers.goWechatBoot.postMessage('aaa');
					}
				}
				if (platform == 'android') {
					window.location.href = 'goWechat';
				}
			},
			scroll: function(e) {
				// console.log(e.detail.scrollTop)
				// let that = this;
				// that.scrollTop = e.detail.scrollTop;
				// //this.old.scrollTop = e.detail.scrollTop
				// if (that.scrollTop > 200) { // 滚动超过300时吸顶
				// 	that.stickyStyle = 'position: fixed; top: 0; width: 100%; z-index: 999;';
				// } else {
				// 	that.stickyStyle = '';
				// }
			},
			loginH5() {
				let that = this;
				loginMobile({
						phone: that.phone,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);

					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},

			getCamp() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getCurrentBootcamp(p).then(res => {
					if (res.code == 0) {
						that.campData = res.data;
						that.bootId = res.data.id.toString();

					}
				})
			},
			calcSwiperHeight() {
				let that = this;
				// 使用$nextTick确保在DOM更新后再获取高度
				that.$nextTick(() => {
					// 创建节点查询
					const query = uni.createSelectorQuery().in(this);
					// 查找对应索引的内容容器。注意选择器，这里用class和属性选择器
					query.select('.allContent').boundingClientRect((rect) => {
						if (rect) {
							// 获取到节点的高度，并设置为swiper的高度
							that.detailHeight = rect.height;
							console.log('calcSwiperHeight === ', rect.height);
						}
					}).exec();
				});
			},
			change(current) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;
			},
			transition({
				detail: {
					dx
				}
			}) {
				let that = this;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				let that = this;
				that.$refs.tabs.setFinishCurrent(current);
				that.swiperCurrent = current;
				that.current = current;

				//重新计算高速
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.call {
		position: fixed;
		bottom: 60rpx;
		left: 40rpx;
		background-color: #ea5550;
		font-size: 24rpx;
		width: calc(100% - 80rpx);
		height: 80rpx;
		line-height: 80rpx;
	}

	.header {
		width: 100%;
		height: 200px;
	}

	.sticky-box {
		position: sticky;
		top: 0;
		/* 设定吸顶时的位置 */
		z-index: 999;
		/* 确保元素在顶层 */
		background-color: #fff;
		/* 建议设置背景，防止遮挡下方内容 */
	}

	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: relative;
		z-index: 1001;
		//margin-top: -200px;
		width: 100%;
		height: 100vh;
		//background: rgb(95, 157, 228);
		background: transparent;
	}
</style>